<template>
    <div>
        <div class="imgDiv" v-for="item in imgMessage" :key="imgMessage.index">
            <img :src="item.imgSrc" alt="">
            <p>姓名：{{item.name}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                imgMessage:[
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                    {imgSrc:require('../../assets/logo.png'),name:'vue'},
                ],
            }
        }
    }
</script>

<style scoped lang="less">
    .imgDiv{
        float: left;
        margin-left: 15px;
        margin-top: 15px;
        border: 1px solid red;
        img{
            width: 100px;
            height: 100px;
        }

    }
</style>